<template>
    <div>
        <el-row>
            <el-col :span="16" style="text-align:left;">
                {{ comment.owner }}
                <span v-if="comment.parent" style="color:#7f7f7f">回复 {{ comment.parent.owner }}</span>
                :
            </el-col>
            <el-col
                :span="8"
                style="text-align:right;font-size:.8em;color:gray;"
            >{{ $filters.timeFormatter(comment.created_at) }}</el-col>
        </el-row>
        <el-row>
            <el-col :span="1"></el-col>
            <el-col
                :span="23"
                :offset="1"
                style="text-align:left;"
            ><span v-if="!showAll">{{ $filters.ellipsis(comment.content, visibleLength) }}</span>
            <span v-else>{{comment.content}}</span>
            <div v-if="comment.content.length>visibleLength">
                <el-button type="text" size="medium" @click="showAll=!showAll">{{showAll?'收起':'显示全部'}}</el-button></div>
            </el-col>
        </el-row>
        <div style="text-align:left;">
            <el-space :size="40">
            <el-button type="text" size="mini" @click="reply" style="">
                <!-- <i class="fa fa-reply"></i> 回复 -->
                <unicon name="share" width="1.5em"></unicon> 回复
            </el-button>
            <el-button type="text" size="mini" v-if="(comment.replies.length!=0||comment.parent)&&showBtn" 
            @click="showReplyList(comment)" 
            >
                <!-- <i class="fa fa-comments-o"></i> 查看对话 -->
                <unicon name="comments-alt" width="1.5em"></unicon> 查看对话
            </el-button></el-space>
        </div>
        <el-divider style="margin:0.5em 0;"></el-divider>
    </div>
</template>

<script>
import { ref } from 'vue'
import bus from '../utils'
export default {
    props: {
        comment: { type: Object },
        showBtn:{type:Boolean}
    },
    setup(props, ctx) {
        const visibleLength = 20
        const showAll = ref(false)

        const reply = () => {
            console.log("emitting", props.comment.id, props.comment.owner)
            let topic_id = props.comment.topic_id?props.comment.topic_id:props.comment.id
            bus.emit("reply", { comment_id: props.comment.id, owner: props.comment.owner,topic_id })
        }
        const showReplyList=(comment)=>{
            let topic_id = comment.topic_id?comment.topic_id:comment.id
            bus.emit("showReplyList", topic_id)
        }
        return { reply, showReplyList, showAll, visibleLength }
    }

}
</script>

<style>
.show-on-hover{
    display: none;
}
.show-on-hover:hover{
    display: block;
}
</style>